<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <div id="app">
             <h1>作用域插槽学习</h1>
             <aaa>
                 <div slot-scope='aaaa'>
                     <h1>h1标题    {{aaaa.text}}</h1 > 
                 </div>
             </aaa>
             
        </div>

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 作用域插槽 语法难度 VUE基础语法 能排前三 
        // 1 作用域插槽理解 首先 作用域插槽 是一个匿名插槽 拥有匿名插槽的一切特性 
        // 2 作用域插槽理解2 作用域插槽还是一个 携带数据的匿名插槽 父组件中的代码可以用slot-scope
        // 去吸回数据供自己使用 

        // 总结 1作用域插槽首先是一个 匿名插槽 2作用域插槽 是携带信息的匿名插槽 父组件首先当成匿名插槽跳入
        // 然后看到了  作用域插槽坑里面携带的信息 VUE给了slot-scope 粉碎 提取 信息的API函数 可以提取信息给自己使用 
        Vue.component('aaa', {
            template: `        
            <div >
                <h1>作用域插槽2</h1>
                 <slot :text='name'></slot>
             </div>
            `,
            data: function () {
                return {
                    name: '独孤九剑'
                }
            },
     
        })



        var vm = new Vue({
            // 监管的容器 
            el: '#app',
            // 数据定义
            data: {
                msg: 'helloworld',
                msg2: '你好世界'
            }
        })

        console.log('vm', vm)



    </script>
</body>

</html>